<template>
  <PageWrapper dense>
    <CollapseContainer title="箱规和运输">
      <BasicForm @register="registerForm">
        <!-- 装箱重量 -->
        <template #packageWeight="{ model, field }">
          <a-input v-model:value="model[field]">
            <template #addonAfter> lbs </template>
          </a-input>
        </template>
        <!-- 装箱尺寸 -->
        <template #packageSize>
          <Space>
            <a-input v-model:value="state.spuExtraInfo.packingLength" style="width: 250px">
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.packageLengthUnit" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value"
                    >{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
            <a-divider type="vertical">X</a-divider>
            <a-input v-model:value="state.spuExtraInfo.packingWidth" style="width: 250px">
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.packageWidthUnit" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value"
                    >{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
            <a-divider type="vertical">X</a-divider>
            <a-input v-model:value="state.spuExtraInfo.packingHeight" style="width: 250px">
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.packageHeightUnit" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value"
                    >{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
          </Space>
        </template>
        <!-- 生产天数 -->
        <template #produceDay>
          <a-input-group compact>
            <InputNumber
              v-model:value="state.spuExtraInfo.produceStartDay"
              style="width: 200px; text-align: center"
              placeholder="Minimum"
            />
            <a-input
              style="width: 50px; text-align: center; pointer-events: none"
              placeholder="至"
              disabled
            />
            <InputNumber
              v-model:value="state.spuExtraInfo.produceEndDay"
              style="width: 200px; text-align: center"
              placeholder="Maximum"
            />
          </a-input-group>
        </template>
        <!-- 加急天数 -->
        <template #urgentDay>
          <a-input-group compact>
            <InputNumber
              v-model:value="state.spuExtraInfo.urgentStartDay"
              style="width: 200px; text-align: center"
              placeholder="Minimum"
            />
            <a-input
              style="width: 50px; text-align: center; pointer-events: none"
              placeholder="至"
              disabled
            />
            <InputNumber
              v-model:value="state.spuExtraInfo.urgentEndDay"
              style="width: 200px; text-align: center"
              placeholder="Maximum"
            />
          </a-input-group>
        </template>
      </BasicForm>
    </CollapseContainer>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { BasicForm, useForm } from '@/components/Form';
  import { reactive } from 'vue';
  import { drawerSchemas2 } from '../product.data';
  import { InputNumber, Select, Space } from 'ant-design-vue';
  import { CollapseContainer } from '@/components/Container';
  import { PageWrapper } from '@/components/Page';
  import { DictEnum } from '@/enums/dictEnum';
  import { getDictOptions } from '@/utils/dict';

  defineOptions({ name: 'TransportEdit' });
  const SelectOption = Select.Option;
  const [registerForm, { setFieldsValue, validate }] = useForm({
    // layout: 'vertical',
    labelWidth: 100,
    name: 'user-drawer',
    showActionButtonGroup: false,
    baseColProps: { span: 12 },
    schemas: drawerSchemas2,
  });
  const state = reactive({
    spuExtraInfo: {
      packingLength: '',
      packageLengthUnit: '',
      packingWidth: '',
      packageWidthUnit: '',
      packingHeight: '',
      packageHeightUnit: '',
      produceStartDay: '',
      produceEndDay: '',
      urgentStartDay: '',
      urgentEndDay: '',
    },
  });
  async function handleSubmit() {
    try {
      const data = {
        ...(await validate()),
        ...state.spuExtraInfo,
        produceDay: `${state.spuExtraInfo.produceStartDay},${state.spuExtraInfo.produceEndDay}`,
        urgentDay: `${state.spuExtraInfo.urgentStartDay},${state.spuExtraInfo.urgentEndDay}`,
      };
      return data;
    } catch (e) {
      console.log('e', e);
    } finally {
    }
  }
  const setFormData = (data: any) => {
    setFieldsValue(data);
    state.spuExtraInfo = {
      packingLength: data.packingLength || '',
      packageLengthUnit: data.packageLengthUnit || '',
      packingWidth: data.packingWidth || '',
      packageWidthUnit: data.packageWidthUnit || '',
      packingHeight: data.packingHeight || '',
      packageHeightUnit: data.packageHeightUnit || '',
      produceStartDay: data.produceDay.split(',')[0] || '',
      produceEndDay: data.produceDay.split(',')[1] || '',
      urgentStartDay: data.urgentDay.split(',')[0] || '',
      urgentEndDay: data.urgentDay.split(',')[1] || '',
    };
  };
  defineExpose({ handleSubmit, setFormData });
</script>
